<!-- 支付页 -->
<template>
	<view class="verHeight" :class="[data.gender == 2 ?'boy-bg':'girl-bg']">
		<u-toast ref="uToast" />
		<view class="header">
			<image style="height: 240rpx;width: 50%;" :src="IMG_URL + gamerList.links[0].link" mode="aspectFill">
			</image>
			<view style="height: 240rpx;width: 50%;font-size: 40rpx;"
				:class="[data.gender == 2 ?'boyFontColor':'girlFontColor']">
				<view class="viewMtr">{{gamerList.name}}</view>
				<view class="viewMtr">{{gamerList.age}}岁</view>
				<view class="b-flex viewMtr" style="white-space: nowrap;">
					<view class="icon flexIcon" :class="[data.gender == 2 ?'boy-coin':'girl-coin']"></view>
					{{gamerList.price}}币/小时
				</view>
			</view>
		</view>
		<!-- 下单时长 -->
		<view class="numberBox handler" style="font-size: 40rpx;"
			:class="[data.gender == 2 ?'boyFontColor':'girlFontColor']">
			<view>下单时长/小时: </view>
			<u-number-box v-model="value" @change="valChange"></u-number-box>
		</view>
		<!-- <span style="margin: 30rpx;">请选择下单地址</span> -->
		<!-- 地址信息 -->
		<view class="handler numberBox" style="font-size: 40rpx;margin-top: 20rpx;"
			:class="[data.gender == 2 ?'boyFontColor':'girlFontColor']">
			<view>地址:</view>
			<u-input @click="inputStatus" v-model="valueaddress" :clearable="false" input-align="right" type="picker"
				placeholder="请选择地址 >" disabled=true />
		</view>
		<view class="handler numberBox" style="font-size: 40rpx;margin-top: 20rpx;"
			:class="[data.gender == 2 ?'boyFontColor':'girlFontColor']">
			<view>详细地址:</view>
			<u-input v-model="indexValue" :border="border" :clearable="false" />
		</view>

		<!-- 优惠券 -->
		<!-- 	<view class="handler numberBox" style="font-size: 40rpx;margin-top: 20rpx;" :class="[data.gender == 2 ?'boyFontColor':'girlFontColor']">
				<view>优惠券:</view>
				<view style="font-size: 30rpx;" @click="updateIsShow">优惠 ></view>
		</view> -->
		<view class="handler numberBox" style="font-size: 40rpx;margin-top: 20rpx;"
			:class="[data.gender == 2 ?'boyFontColor':'girlFontColor']">
			<view>备注信息:</view>
			<u-input v-model="data.notes" :border="border" :clearable="false" />
		</view>

		<!-- 地址信息 -->
		<u-picker mode="region" @cancel="addCancel" @confirm="addConfirm" v-model="addShow"
			:area-code='["44", "4404", "440404"]'></u-picker>

		<!--  下单按钮  -->
		<view class="bottom-btn">

			<view class="money flex-1" :class="[data.gender == '男'?'zy-dark-blue':'zy-dark-red']">
				<view class="icon" :class="[data.gender == '男'?'boy-coin':'girl-coin']"></view>
				<view style="flex: 3;white-space: nowrap;">{{price}}币</view>
			</view>

			<view class="btn flex-1">
				<view class="btn-view">
					<u-button :custom-style="btnType" @click="clickEnter" type="primary" shape="square">
						<u-icon name="shopping-cart" color="#fff" size="60"></u-icon>
						下单
					</u-button>
				</view>
			</view>
		</view>
		<!-- 弹窗确认下单 -->
		<u-modal v-model="isShow" :content="content" @confirm="confirm" :show-cancel-button="true"></u-modal>
		<!-- 弹窗跳转页面 -->
		<u-modal v-model="returnShow" :content="text" @confirm="returnMoney" :show-cancel-button="true"></u-modal>
		<u-popup v-model="show" mode="bottom" border-radius="14" :safe-area-inset-bottom="true" :closeable="true">
			<!-- 优惠券显示 -->
			<view style="min-height: 50vh;margin: 120rpx 30rpx 30rpx 30rpx;">
				<scroll-view :scroll-into-view="toView" scroll-y="true" style="height: 50vh;"
					scroll-with-animation="true">
					<view class="yhModel"
						style="background-color: aqua;border-radius: 30rpx; height: 120rpx;margin: 30rpx; margin-bottom: 30rpx;text-align: center;line-height: 120rpx;"
						v-for="(item,index) in copList">
						<view style="width: 30%;">
							优惠{{item.cutAccount}}币
						</view>
						<view style="width: 50%;">满{{item.threshold}}可用</view>
						<view style="width: 20%;" @click="reverMoney(item.cutAccount,item.threshold)">去使用</view>
					</view>
				</scroll-view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import {
		GetOnGamer
	} from "../../../api/gamer.js";
	import {
		getLiner,
		userLoader
	} from "../../../api/order.js";
	import {
		getCoupons
	} from '@/api/coupon.js';
	import {
		IMG_URL
	} from "../../../config/URL";
	import {
		getCode,
		wx_login
	} from "../../../api/login";

	export default {
		async onLoad(options) {
			const ids = options.id
			const gamerInfo = await GetOnGamer({
				id: ids,
				f_user_id: uni.getStorageSync("userInfo").id
			});
			this.end = parseInt(gamerInfo.data.data.work_time_end ) / 60
			this.gamerList = gamerInfo.data.data
			this.price = gamerInfo.data.data.price
			this.InitPrice = gamerInfo.data.data.price
			this.data.gameId = gamerInfo.data.data.id
		},
		data() {
			return {
				text:"用户余额不足,是否去充值",
				returnShow:false,
				// 结束时间
				end:0,
				// 优惠券
				copList: {},
				show: false,
				content: "确认下单",
				isShow: false,
				// 地址
				valueaddress: "",
				// 详细地址
				indexValue: "",
				addShow: false,
				// 接口所需参数
				data: {
					"address": "",
					"businessId": 0,
					"couponId": 0,
					"gameId": 0,
					"gamerIds": "",
					"goodsId": 0,
					"mobile": "",
					"notes": "",
					"quota": 0,
					"totalFee": 0,
					"totalTime": 0,
					"userIds": ""
				},
				textvalue: "",
				type: 'text',
				border: true,
				itemList: [],
				arrow: false,
				isshow: false,
				head: "优惠券",
				InitPrice: 0,
				value: 1,
				price: 0,
				gamerList: {},
				price: 0,
				btnType: {
					margin: '0px', // 注意驼峰命名，并且值必须用引号包括，因为这是对象
					padding: '0px',
					borderRadius: '40rpx',
					marginLeft: '10rpx',
					fontSize: '40rpx'
				},
				// 优惠计算
				copdata: {
					jian: 1,
					zhi: 1
				},
				IMG_URL,
			}
		},
		methods: {
			async getCopList() {
				const res = await getCoupons({
					"page": 1,
					"size": 10,
					"tags": 2
				})
				this.copList = res.data.data.list
			},
			clickEnter() {
				this.isShow = true
			},
			// 弹窗确认下单
			async confirm() {
				await this.setMoney()
				this.isShow = false
			},
			inputStatus() {
				this.valueaddress = "",
					this.addShow = !this.addShow
			},
			// 地址pop
			addConfirm(val) {
				for (const key in val) {
					this.valueaddress += ((val[key].label))
				}
			},
			addCancel(val) {},
			// 获取所有优惠券
			async setOrderList() {
				const res = await getLiner();
				this.itemList = res.data.data
			},
			// 优惠使用
			/*
			jian:优惠额度
			zhi:达到多少额度才能使用
			*/
			reverMoney(jian, zhi) {
				this.copdata.jian = jian
				this.copdata.zhi = zhi
			},
			// 用户下单
			async setMoney() {
				let date = new Date()
				if (this.value == 0) {
					this.$refs.uToast.show({
						title: '时长为0',
						type: 'error',
						icon: false
					})
					return
				}
				if(date.getHours() + parseInt(this.value) > this.end || this.value >= 24){
					this.$refs.uToast.show({
						title: '超出互娱师工作时长',
						type: 'error',
						icon: false
					})
					return
				}
				
				if (this.valueaddress == "" || this.indexValue == "") {
					this.$refs.uToast.show({
						title: '地址为空',
						type: 'error',
						icon: false
					})
					return
				}
				this.data.address = this.valueaddress + this.indexValue
				this.data.totalFee = this.price
				this.data.totalTime = this.value

				const res = await userLoader(this.data);
				if (res.data.code === 200) {
					this.$refs.uToast.show({
						title: res.data.data,
						type: "success"
					})
					const {
						code
					} = await getCode()
					const loginMsg = await wx_login(code)
					if (loginMsg.data.msg != '用户不存在') {
						uni.setStorageSync('token', loginMsg.data.data.token);
						uni.setStorageSync('userInfo', loginMsg.data.data.user);
						uni.setStorageSync('couponNum', loginMsg.data.data.couponNum);
					}
					uni.switchTab({
						url: '/pages/Home/Home'
					});
					return
				} else {
					this.returnShow = true
				}
			},
			// 确认跳转
			returnMoney(){
				// 跳转
				uni.navigateTo({
					url:'/subPages/subUser/userBalance/index'
				})
			},
			valChange(e) {
				this.price = e.value * this.InitPrice
			},
			updateIsShow() {
				this.show = !this.show
				this.getCopList()
			}
		}
	}
</script>

<style lang="scss" scoped>
	@import "../../../lib/css/color";

	.yhModel {
		display: flex;
	}

	.handler {
		margin: 30rpx;
	}

	.numberBox {
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.b-flex {
		display: flex;
		align-items: center;
	}

	.viewMtr {
		margin: 10rpx;
	}

	.boyFontColor {
		color: aqua;
	}

	.girlFontColor {
		color: hotpink;
	}

	.flexIcon {
		width: 50rpx;
		height: 50rpx;
	}

	.boy-coin {
		background: url('/static/image/userDetails/boyCoin.png') no-repeat right;
		background-size: contain;
	}

	.girl-coin {
		background: url('/static/image/userDetails/girlCoin.png') no-repeat right;
		background-size: contain;
	}

	.verHeight {
		min-height: 100vh;
		margin: 0;
		padding: 0;
	}

	.header {
		margin: 30rpx;
		height: 240rpx;
		display: flex;
		position: relative;
	}

	.bottom-btn {
		position: absolute;
		bottom: 0;
		background: white;
		border-radius: 50rpx;
		width: 95%;
		display: flex;
		justify-content: space-between;
		margin: 0 20rpx 0 20rpx;

		.money {
			margin-left: 20rpx;
			font-size: 60rpx;
			line-height: 100rpx;
			font-weight: bolder;

			.icon {
				flex: 1;
			}
		}

		.btn {
			padding: 10rpx;

			view {
				font-size: 40rpx;
				line-height: 80rpx;
			}

			.btn-view {
				flex-grow: 1;
				border-radius: 40rpx;
				overflow: hidden;
			}
		}
	}


	.flex-1 {
		display: flex;
		flex: 1;
	}
</style>
